<template>
  <view>
    <!-- 使用子组件 -->
    <view class="search-box">
      <my-search-bar palceholder="搜索"></my-search-bar>
    </view>
    <!-- 轮播图 -->
    <swiper
      autoplay
      circular
      interval="3000"
      indicator-dots
      indicator-active-color="red"
    >
      <navigator
        :url="'/subpkg/detail/index?goods_id=' + item.goods_id"
        v-for="(item, index) in swipers"
        :key="index"
      >
        <swiper-item>
          <image :src="item.image_src" mode="scaleToFill" />
        </swiper-item>
      </navigator>
    </swiper>
    <!-- 导航菜单 -->
    <view class="nav-list">
      <image
        class="nav-image"
        v-for="item in catitems"
        :key="item.name"
        :src="item.image_src"
        @click="clickTocategory(item.name)"
        mode="scaleToFill"
      >
      </image>
    </view>
    <!-- 楼层图 -->
    <view>
      <view v-for="item in floordata" :key="item.floor_title.name">
        <!-- 1, 时尚女装 优质服饰,箱包配饰,都是图片,所以遍历图片 -->
        <image
          class="floor-title"
          :src="item.floor_title.image_src"
          mode="widthFix"
        ></image>
        <view class="floor-image-box">
          <!-- 2左边的图片 是在product_list这个数组里面的 i -->
          <!-- image里面的 mode="widthFix"  宽度不变，高度自动变化，保持原图宽高比不变-->
          <!-- navigator 和view标签效果一样,但是navigator可以使用url,比如url='/subpkg/goods-list/index?' -->
          <!-- 因为控制台的AppData里面product_list[5]这数组里面有 navigator_url:/pages/goods_list?query=户外 -->
          <navigator :url="item.product_list[0].navigator_url">
            <!-- AppData里面的 product_list[5]数据是有5个图片的,里面的第一个就是左边需要的大图 -->
            <!-- 所以product_list[0].image_src  -->
            <image
              :style="{ width: item.product_list[0].image_width + 'rpx' }"
              :src="item.product_list[0].image_src"
              mode="widthFix"
            ></image>
          </navigator>
          <!-- 3右边的图片 -->
          <navigator
            class="right-image-box"
            :url="item.product_list[0].navigator_url"
          >
            <!-- 上的第一次遍历item 得到floor_title{2} product_list[5] -->
            <!-- 这里面的item1就是遍历 product_list[5] 然后获取里面的数据来渲染-->
            <!-- 注意.v-if 和v-for是不能同时使用的, 所用这里用v-show="index > 0" 下标大于0的才显示 -->
            <!-- 因为等于0的是左边的大图,不需要它 -->
            <image
              v-for="(item1, index) in item.product_list"
              :key="item1.name"
              v-show="index > 0"
              :style="{ width: item1.image_width + 'rpx' }"
              :src="item1.image_src"
              mode="widthFix"
            >
            </image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      swipers: [], // 轮播图图片
      catitems: [], // 导航菜单
      floordata: [] // 楼层图片
    }
  },
  onLoad () {
    this.getSwipersData() // 轮播图图片
    this.getCategoryData() // 导航菜单
    this.getFloordataData() // 楼层图片
  },
  computed: {
    ...mapGetters('cart', ['getTotal'])
  },
  // 监听器里面,有一个bug,当在购物车或者subpkg\detail\index.vue详情页面点击添加时,返回到首页是不会执行watch里面的uni.setTabBarBadge
  // 是不执行的,但是watch可以打印,同时仓库中的getTotal也可以打印,但是数据就同步不到,
  // 说明了一个问题,在当前页面虽然能监听到点击更改触发的逻辑,但是它不生效,不更新数据
  // 解决方案, 用onShow在当前页面调用uni.setTabBarBadge()方法
  // watch: {
  //   getTotal () {
  //     // console.log('watch执行了') // 能打印,但是uni.setTabBarBadge方法不执行
  //     // 为 tabBar 某一项的右上角添加文本。
  //     uni.setTabBarBadge({
  //       index: 2,
  //       text: this.getTotal + ''
  //     })
  //   }
  // },
  onShow () {
    // this.getTotal值为0的时候 要删除右上角的文本
    if (this.getTotal) {
      // 为 tabBar 某一项的右上角添加文本。
      uni.setTabBarBadge({
        index: 2,
        text: this.getTotal + ''
      })
    } else {
      // 当购物车为0的时候  要删除右上角的文本
      uni.showTabBarRedDot({
        index: 2
      })
    }
  },
  methods: {
    async getSwipersData () {
      const res = await uni.$request({
        url: 'home/swiperdata'
      })
      // 打印得, message:[里面是图片]    meta: {msg: "获取成功", status: 200}
      // console.log('res', res)
      if (res.meta.status === 200) {
        this.swipers = res.message
      }
    },
    async getCategoryData () {
      const res = await uni.$request({
        url: 'home/catitems'
      })
      console.log('res', res)
      if (res.meta.status === 200) {
        this.catitems = res.message
      }
    },
    // 请求到数据后,在控制台台的AppData中得 floor_title{2}  product_list[5] 这两个数据是平级的
    // 渲染页面的时候要看仔细里面数据的关系,
    async getFloordataData () {
      const res2 = await uni.$request({
        url: 'home/floordata'
      })
      console.log('res2', res2)
      if (res2.meta.status === 200) {
        // 在数据回来之前,处理一下 navigator_url这个数据,因为点击跳转的点击事件需要用到他携带参数
        // 上面标签定义 <navigator :url="item.product_list[0].navigator_url"></navigator>
        res2.message.forEach(item => {
          item.product_list.forEach(item2 => {
            item2.navigator_url =
              '/subpkg/goods-list/index?' + item2.navigator_url.split('?')[1]
          })
        })
        this.floordata = res2.message
      }
    },
    // 分类的点击事件
    clickTocategory (name) {
      console.log('name', name)
      if (name === '分类') {
        // 跳转到 tabBar 页面，并关闭其他所有非  tabBar 页面。 注意是 非
        uni.switchTab({
          url: '/pages/category/index'
        })
      }
    }
    // 点击跳转到，商品详情页面
    // 轮播图的位置用了这个方法 :url="'/subpkg/detail/index?goods_id='+goods_id"
    // goTodetail (goods_id) {
    //   uni.navigateTo({
    //     url: '/subpkg/detail/index?goods_id=' + goods_id
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
swiper {
  width: 100%;
  height: 400rpx;
  swiper-item {
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;
  .nav-image {
    width: 128rpx;
    height: 140rpx;
  }
}
.loor-title {
  height: 60rpx;
  width: 100%;
  display: flex;
}
.floor-image-box {
  display: flex;
  padding-left: 10rpx;
}
.right-image-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
}
</style>
